<template>
  <div v-loading="formLoading" class="bg">
    <!-- 10-保存、20-提交、30-作废、40-完成、50-驳回、60-撤回 -->
    <div class="btns routeHeader mb-5px">
      <el-button
        type="primary"
        @click="submitForm(10)"
        :loading="formLoading"
        v-hasPermi="['quality:quality-mgmt-ncr:save']"
        v-if="[10, 70].includes(formData.dictNcrStatus) && !viewStatus"
        :disabled="viewStatus"
      >
        保存
      </el-button>
      <el-button
        type="primary"
        @click="submitForm(40)"
        :loading="formLoading"
        v-hasPermi="['quality:quality-mgmt-ncr:save']"
        v-if="formData.dictNcrStatus == 30 && !viewStatus"
        :disabled="viewStatus"
      >
        完成
      </el-button>
      <el-button
        type="primary"
        @click="submitForm(20)"
        :loading="formLoading"
        v-hasPermi="['quality:quality-mgmt-ncr:update']"
        v-if="[10, 20, 40, 70].includes(formData.dictNcrStatus) && !viewStatus"
        :disabled="viewStatus"
      >
        提交
      </el-button>
      <el-button
        type="danger"
        @click="submitForm(30)"
        :loading="formLoading"
        v-hasPermi="['quality:quality-mgmt-ncr:delete']"
        v-if="[10, 70].includes(formData.dictNcrStatus) && !viewStatus"
        :disabled="viewStatus"
      >
        作废
      </el-button>
      <el-button
        type="danger"
        @click="submitForm(50)"
        :loading="formLoading"
        v-hasPermi="['quality:quality-mgmt-ncr:delete']"
        v-if="formData.dictNcrStatus == 30 && !viewStatus"
        :disabled="viewStatus"
      >
        驳回
      </el-button>
      <el-button
        type="danger"
        @click="submitForm(60)"
        :loading="formLoading"
        v-hasPermi="['quality:quality-mgmt-ncr:delete']"
        v-if="(formData.dictNcrStatus == 20 || formData.dictNcrStatus == 40) && !viewStatus"
        :disabled="viewStatus"
      >
        撤回
      </el-button>
      <el-button @click="goBack"> 关闭 </el-button>
    </div>
    <div class="formView" :style="`height: ${contentHeight}px`">
          <div class="logoBox">
            <img src="@/assets/imgs/hasColorLogo.png" alt="" class="logo" />
            <div class="logoTitleBox">
              <div class="logoTitle">江苏江顺精密机电设备有限公司</div>
              <div>不合格品评审处理单</div>
            </div>
          </div>
          <div class="firstCard">
            <el-row class="colItem">
              <el-col :span="12" class="cardItem">
                <div class="formTitle">编号</div>
                <el-input v-model="formData.checkTaskNumber" disabled/>
              </el-col>
              <el-col :span="12" class="cardItem">
                <div class="formTitle">客户名称</div>
                <el-input v-model="formData.customerName" disabled />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="6" class="cardItem">
                <div class="formTitle">部件编号</div>
                <el-input v-model="formData.productNumber" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">部件名称</div>
                <el-input v-model="formData.partNumber" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">规格</div>
                <el-input v-model="formData.specification" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">产品编号</div>
                <el-input v-model="formData.productNumber" disabled />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="6" class="cardItem">
                <div class="formTitle">不合格数量</div>
                <el-input v-model="formData.exceptionQuantity" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">单位</div>
                <el-input v-model="formData.partUnit" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">图纸图号</div>
                <el-input v-model="formData.drawingNumber" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">发现工序</div> 
                <el-select v-model="formData.dictDiscoveryProcess" placeholder="请选择发现工序" :disabled="![10, 70].includes(formData.dictNcrStatus) || viewStatus" style="width:100%">
                <el-option
                 v-for="dict in getIntDictOptions('dict_discovery_process')"
                 :key="dict.value"
                 :label="dict.label"
                  :value="dict.value"
                  />
                </el-select>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="6" class="cardItem">
                  <div class="formTitle">供应商名称</div>
                  <el-select
                  v-model="formData.supplierName"
                  filterable
                  :reserve-keyword="false"
                  remote
                  :remote-method="setOption"
                  @keyup.enter="searchSupplier"
                  style="width: 100%"
                  :disabled="![10, 70].includes(formData.dictNcrStatus) || viewStatus"
                  >
                  <el-option
                  v-for="item in supplierList"
                  :key="item.supplierName"
                  :label="item.supplierName"
                  :value="item.supplierName"
                  />
                 </el-select>
                 <el-button :icon="Search" @click="openSupplierForm()"/>
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle"><span style="color: red">*</span>物料类型</div>
                  <el-select 
                v-model="formData.dictMaterialType" 
                placeholder="请选择物料类型" 
                :disabled="![10, 70].includes(formData.dictNcrStatus) || viewStatus"
                style="width:100%">
                <el-option
                 v-for="dict in getIntDictOptions('dict_material_type')"
                 :key="dict.value"
                 :label="dict.label"
                  :value="dict.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle"><span style="color: red">*</span>责任部门</div>
                <el-select 
                v-model="formData.configOrgDeptArchivesName" 
                placeholder="请选择责任部门" 
                :disabled="![10, 70].includes(formData.dictNcrStatus) || viewStatus" 
                style="width:100%"
                @change="selectDept">
                <el-option
                 v-for="dict in getDeptList"
                 :key="dict.id"
                 :label="dict.name"
                 :value="dict.name"
                  />
                </el-select>
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle"><span style="color: red">*</span>责任人</div>
                  <el-select
                  v-model="formData.responsiblePersonName"
                  filterable
                  :reserve-keyword="false"
                  remote
                  :remote-method="setOption"
                  @keyup.enter="searchResponsible"
                  style="width: 100%"
                  :disabled="![10, 70].includes(formData.dictNcrStatus) || viewStatus"
                  >
                  <el-option
                  v-for="item in responsiblePersonList"
                  :key="item.deptId"
                  :label="item.nickname"
                  :value="item.nickname"
                  />
                 </el-select>
                 <el-button :icon="Search" @click="openResponsiblePersonForm()"/>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle"><span style="color: red">*</span>问题描述</div>
                <el-input
                  v-model="formData.problemDescription"
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                  :disabled="![10, 70].includes(formData.dictNcrStatus) || viewStatus"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col 
              :span="24" 
              class="cardItem"
              :style="{backgroundColor:formData.dictNcrStatus==10||viewStatus ?'':'#f5f7fa'}">
                  <div class="formBigTitle">问题描述附件</div>
                    <!-- <UploadFile
                    v-model="problemAttachmentFileList"
                    :fileSize="200"
                    :fileType="[ 'pdf', 'png', 'jpg']"
                    @update:modelValue="uploadProblemFileRes"
                    :isShowTip="false"
                    class="upLoadFile"
                    :buttonStatus="!viewStatus"
                    v-if="formData.dictNcrStatus==10 || viewStatus"
                      /> -->
                  <div class="upLoad">
                    <el-form-item  prop="fileId" v-if="[10, 70].includes(formData.dictNcrStatus) && !viewStatus ">
                    <UploadFile
                      class="upLoadFile"
                      v-model="problemAttachmentFileList"
                      :limit="1"
                      :fileSize="200"
                      :fileType="['pdf', 'png', 'jpg']"
                      @update:modelValue="uploadProblemFileRes"
                    />
                  </el-form-item>
                  <el-form-item  prop="fileName" v-else>
                    <el-button v-if="formData.problemAttachmentFileName" class="upLoadFile" type="primary" @click="openFile(formData.problemAttachmentFilePath)">{{
                      formData.problemAttachmentFileName
                    }}</el-button>
                  </el-form-item>  
                  </div>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col 
              :span="24" 
              class="cardItem" 
              :style="{backgroundColor:formData.dictNcrStatus==10&&!viewStatus ?'':'#f5f7fa'}">
                <div class="formBigTitle"><span style="color: red">*</span>处理结果</div>
                <el-radio-group 
                v-model="formData.dictNcrProcessResult "
                class="radioGroup" 
                :disabled="![10, 70].includes(formData.dictNcrStatus) || viewStatus">
                <el-radio :label="10">退货</el-radio>
                <el-radio :label="20">换货</el-radio>
                <el-radio :label="30">维修</el-radio>
                <el-radio :label="50">设计变更</el-radio>
                <el-radio :label="40">返工</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col 
              :span="24" 
              class="cardItem " 
              :style="{backgroundColor:[10, 70].includes(formData.dictNcrStatus) &&!viewStatus ?'':'#f5f7fa'}">
                <div class="formBigTitle"><span style="color: red">*</span>是否纠正预防</div>
                <el-radio-group 
                v-model="formData.dictCorrectivePrevention "
                class="radioGroup" 
                :disabled="![10, 70].includes(formData.dictNcrStatus) || viewStatus">
                <el-radio :label="10">是</el-radio>
                <el-radio :label="20">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col 
              :span="24" 
              class="cardItem">
                <div class="formBigTitle"><span style="color: red">*</span>原因分析</div>
                <el-input
                  v-model="formData.originalAnalysis"
                  :disabled="(formData.dictNcrStatus!=20 && formData.dictNcrStatus!=40 )|| viewStatus"
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col 
              :span="24" 
              class="cardItem">
                <div class="formBigTitle"><span style="color: red">*</span>纠正预防措施</div>
                <el-input
                  v-model="formData.correctivePreventionAction"
                  :disabled="(formData.dictNcrStatus!=20 && formData.dictNcrStatus!=40 )|| viewStatus ||
                  formData.dictCorrectivePrevention ==20"
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col 
              :span="24" 
              class="cardItem"
              :style="{backgroundColor:(formData.dictNcrStatus==20 || formData.dictNcrStatus==40 ) ||viewStatus ?'':'#f5f7fa'}">
                  <div class="formBigTitle">原因分析附件</div>
                    <div class="upLoad">
                    <el-form-item  prop="fileId" v-if="[20, 40].includes(formData.dictNcrStatus) && !viewStatus ">
                      <UploadFile
                        class="upLoadFile"
                        v-model="originalAnalysisAttachmentFileList"
                        :limit="1"
                        :fileSize="200"
                        :fileType="['pdf', 'png', 'jpg']"
                        @update:modelValue="uploadOriginalFileRes"
                      />
                    </el-form-item>
                    <el-form-item  prop="fileName" v-else>
                      <el-button v-if="formData.originalAnalysisAttachmentFileName" class="upLoadFile" type="primary" @click="openFile(formData.originalAnalysisAttachmentFilePath)">{{
                        formData.originalAnalysisAttachmentFileName
                      }}</el-button>
                    </el-form-item>  
                  </div>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                  <div class="formBigTitle">说明</div>
                  <el-input
                  v-model="formData.remark"
                  :disabled="formData.dictNcrStatus!==30 || viewStatus"
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
          </div>
    </div>
  </div>

  <!-- 上传文件 -->
  <CusUploadFile ref="cusUploadFile" @refresh="getDrawingList" :onlyUpdate="false" />
  <!-- 供应商弹框 -->
  <SupplierForm ref="SupplierFormRef" @getSupplier="getSupplier" />
  <!-- 责任人弹框 -->
  <ResponsiblePersonForm
    ref="ResponsiblePersonFormRef"
    @getResponsiblePerson="getResponsiblePerson"
  />
</template>
<script setup>
  import { getIntDictOptions } from '@/utils/dict'
  import * as MgmtNcrApi from '@/api/quality/qualitycontrol/QualityMgmtNcr'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { Search } from '@element-plus/icons-vue'
  import SupplierForm from './supplierForm.vue' //供应商弹框
  import ResponsiblePersonForm from './responsiblePersonForm.vue'
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formData = ref({})
  const contentHeight = ref(0)
  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗

  const SupplierFormRef = ref() //供应商弹框实例
  const ResponsiblePersonFormRef = ref() //责任人弹框实例
  const problemAttachmentFileList = ref([]) //问题描述附件
  const originalAnalysisAttachmentFileList = ref([]) //原因分析附件
  const supplierList = ref() //供应商搜索列表
  const responsiblePersonList = ref() //责任人搜索列表

  //remote
  const searchMes = ref()
  const setOption = (query) => {
    supplierList.value = []
    searchMes.value = query
    console.log('query', query)
  }

  const getDeptList = ref() // 部门信息
  const getDept = async () => {
    getDeptList.value = await MgmtNcrApi.getDeptList()
    console.log('getDeptList', getDeptList.value)
  }

  //选中部门时获取部门id
  const deptId = ref() //部门id
  const selectDept = (val) => {
    responsiblePersonList.value = []
    formData.value.responsiblePersonName = ''
    getDeptList.value.forEach((item) => {
      if (item.name == val) {
        deptId.value = item.id
      }
    })
  }

  // 查看文件
  const openFile = (path) => {
    if (!path) {
      message.notifyError('附件不存在!')
      return
    }
    window.open(path)
  }
  //打开供应商弹框
  const openSupplierForm = () => {
    if (formData.value.dictNcrStatus == 10 && !viewStatus.value) {
      console.log(123123)
      SupplierFormRef.value.open()
    } else {
      return
    }
  }

  //获取供应商
  const getSupplier = (arr) => {
    formData.value.supplierName = arr[0].supplierName
  }

  // 搜索供应商
  const searchSupplier = async () => {
    supplierList.value = []
    supplierList.value = await MgmtNcrApi.getSupplierList({ supplierName: searchMes.value })
  }

  // 打开责任人弹窗
  const openResponsiblePersonForm = () => {
    if (formData.value.dictNcrStatus === 10 && !viewStatus.value) {
      ResponsiblePersonFormRef.value.open(deptId.value)
    } else {
      return
    }
  }

  //获取责任人
  const getResponsiblePerson = (arr) => {
    formData.value.responsiblePersonName = arr[0].nickname
    formData.value.responsiblePersonId = arr[0].id
  }

  // 搜索责任人
  const searchResponsible = async () => {
    responsiblePersonList.value = []
    responsiblePersonList.value = await MgmtNcrApi.getResponsiblePersonList({
      nickname: searchMes.value,
      deptId: deptId.value
    })
  }

  /**问题描述文件上传返回 */
  const uploadProblemFileRes = async (data) => {
    if (JSON.parse(data).length) {
      const res = JSON.parse(data)
      formData.value.problemAttachmentFileName = res[0].name
      formData.value.problemAttachmentFilePath = res[0].url
    } else {
      problemAttachmentFileList.value = []
      formData.value.problemAttachmentFileName = ''
      formData.value.problemAttachmentFilePath = ''
    }
  }

  /**原因分析文件上传返回 */
  const uploadOriginalFileRes = async (data) => {
    if (JSON.parse(data).length) {
      const res = JSON.parse(data)
      formData.value.originalAnalysisAttachmentFileName = res[0].name
      formData.value.originalAnalysisAttachmentFilePath = res[0].url
    } else {
      originalAnalysisAttachmentFileList.value = []
      formData.value.originalAnalysisAttachmentFileName = ''
      formData.value.originalAnalysisAttachmentFilePath = ''
    }
  }

  /**返回 */
  const tagsViewStore = useTagsViewStore()
  const route = useRouter() // 路由
  const goBack = async () => {
    //获取当前路由并删除tagView
    tagsViewStore.delView(route.currentRoute.value)
    //跳转列表页
    route.push({
      path: '/quality/quality/qualitycontrol/QualityMgmtNcr'
    })
  }

  /** 查看详情*/
  /** 提交表单 */
  const submitForm = async (type) => {
    console.log(formData.value, 'ces')
    formLoading.value = true
    console.log(formData.value.responsiblePersonName, 'formData.value.responsiblePersonName')
    try {
      //编辑中
      if (formData.value.dictNcrStatus == 10) {
        const data = ref({
          commitType: type,
          id: formData.value.id,
          supplierName: formData.value.supplierName,
          dictMaterialType: formData.value.dictMaterialType,
          configOrgDeptArchivesName: formData.value.configOrgDeptArchivesName,
          responsiblePersonId: formData.value.responsiblePersonId,
          responsiblePersonName: formData.value.responsiblePersonName,
          problemDescription: formData.value.problemDescription,
          problemAttachmentFileName: formData.value.problemAttachmentFileName,
          problemAttachmentFilePath: formData.value.problemAttachmentFilePath,
          dictNcrProcessResult: formData.value.dictNcrProcessResult,
          dictCorrectivePrevention: formData.value.dictCorrectivePrevention +'',
          correctivePreventionAction: formData.value.correctivePreventionAction
        })
        console.log(data.value, 'data.value5')
        // 保存时
        if (type == 10) {
          if (formData.value.dictNcrProcessResult == 20) {
            data.value.correctivePreventionAction = '/'
          }
          await MgmtNcrApi.updateEditing(data.value)
          message.success(t('保存成功'))
          goBack()
        }
        // 提交时
        if (type == 20) {
          console.log(formData.value.dictNcrProcessResult, 'formData.value.dictNcrProcessResult')
          //物料类型/责任部门/责任人/问题描述/处理结果是否必填
          if (
            !formData.value.dictMaterialType ||
            !formData.value.configOrgDeptArchivesName ||
            !formData.value.responsiblePersonName ||
            !formData.value.problemDescription ||
            !formData.value.dictNcrProcessResult ||
            !formData.value.dictCorrectivePrevention
          ) {
            message.error(
              t(
                '物料类型/责任部门/责任人/问题描述/处理结果/是否纠正预防不能为空/纠正预防措施不能为空'
              )
            )
            return
          }
          //处理结果为退换货时
          if (
            formData.value.dictNcrProcessResult == 10 ||
            formData.value.dictNcrProcessResult == 20
          ) {
            if (!formData.value.supplierName) {
              message.error(t('供应商名称不能为空'))
              return
            }
          }
          //如果供应商名称不为空,校验数量大于不合格熟练的订单,功能暂时还没有
          if (formData.value.supplierName) {
            console.log('如果供应商名称不为空,校验数量大于不合格熟练的订单')
          }
          if (formData.value.dictCorrectivePrevention == 20) {
            data.value.correctivePreventionAction = '/'
          }
          await MgmtNcrApi.updateEditing(data.value)
          message.success(t('提交成功'))
          goBack()
        }
        // 作废时
        if (type == 30) {
          await MgmtNcrApi.updateEditing(data.value)
          message.success(t('数据已作废'))
          goBack()
        }
      }

      //待处理、已驳回
      if (formData.value.dictNcrStatus == 20 || formData.value.dictNcrStatus == 40) {
        const data = ref({
          commitType: type,
          id: formData.value.id,
          originalAnalysis: formData.value.originalAnalysis,
          originalAnalysisAttachmentFileName: formData.value.originalAnalysisAttachmentFileName,
          originalAnalysisAttachmentFilePath: formData.value.originalAnalysisAttachmentFilePath,
          correctivePreventionAction: formData.value.correctivePreventionAction
        })
        // 提交时
        if (type == 20) {
          if (formData.value.originalAnalysis && formData.value.correctivePreventionAction) {
            if (formData.value.dictNcrStatus == 20) {
              await MgmtNcrApi.updatePending(data.value)
              message.success(t('提交成功'))
              goBack()
            } else {
              data.value.commitType = 60
              await MgmtNcrApi.updatePending(data.value)
              message.success(t('提交成功'))
              goBack()
            }
          } else {
            message.error(t('原因分析/纠正预防措施不能为空'))
          }
        }
        // 撤回时
        if (type == 60) {
          await MgmtNcrApi.updatePending(data.value)
          message.success(t('数据已撤回'))
          goBack()
        }
      }
      // 已处理
      if (formData.value.dictNcrStatus == 30) {
        const data = ref({
          commitType: type,
          id: formData.value.id,
          remark: formData.value.remark
        })
        // 完成时
        if (type == 40) {
          if (formData.value.remark) {
            message.success(t('已完成'))
            await MgmtNcrApi.updateProcessed(data.value)
            goBack()
          } else {
            message.error(t('请填写说明'))
          }
        }
        // 驳回时
        if (type == 50) {
          if (formData.value.remark) {
            message.success(t('已驳回'))
            await MgmtNcrApi.updateProcessed(data.value)
            goBack()
          } else {
            message.error(t('请填写说明'))
          }
        }
      }
    } finally {
      formLoading.value = false
    }
  }

  const { query } = useRoute() // 路由的查询
  const viewStatus = ref(false) //是否是查看状态
  /** 初始化 */
  onMounted(async () => {
    contentHeight.value = document.body.clientHeight - 132 - 60
    if (query.type === 'view') {
      viewStatus.value = true
    }
    formData.value = await MgmtNcrApi.getMgmtNcr(query.id)
    if (formData.value.problemAttachmentFileName != null) {
      problemAttachmentFileList.value.push({
        name: formData.value.problemAttachmentFileName,
        url: formData.value.problemAttachmentFilePath
      })
    }
    // 问题描述文件显示
    if (formData.value.originalAnalysisAttachmentFileName != null) {
      originalAnalysisAttachmentFileList.value.push({
        name: formData.value.originalAnalysisAttachmentFileName,
        url: formData.value.originalAnalysisAttachmentFilePath
      })
    }
    getDept()
  })
</script>
<style lang="scss" scoped>
  :deep(.el-input-number) {
    width: 100%;
  }

  .bg {
    background-color: white;
    padding-top: 10px;
  }

  ::v-deep .upload-file-uploader {
    display: flex;
    align-items: center;
  }

  .upLoadFile {
    margin-left: 10px;

    ::v-deep .el-form-item {
      margin-bottom: 0;
    }
  }

  ::v-deep .el-form-item--default {
    margin-bottom: 0;
  }

  ::v-deep .el-form-item {
    margin-bottom: 0;
  }

  .formView {
    overflow-y: auto;
    padding: 50px;
  }

  .Search {
    display: flex;
  }

  .btns {
    margin-bottom: 10px;
    padding-left: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 20px;
  }

  .logoBox {
    display: flex;
    align-items: center;

    .logo {
      width: 300px;
      height: 80px;
    }

    .logoTitleBox {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      padding-right: 250px;

      .logoTitle {
        font-size: 34px;
        text-align: center;
      }

      :last-child {
        display: flex;
        justify-content: center;
      }
    }
  }

  .radioGroup {
    display: flex;
    flex: 1;
    justify-content: center;
  }

  .firstCard {
    border: 1px solid #000;

    :deep(.el-input__wrapper, .el-textarea__inner) {
      box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    }

    :deep(.el-textarea__inner) {
      box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    }

    .newCardItem {
      border-left: 1px solid #000;
    }

    .newFormTitle {
      width: 150px;
      height: 36.5px;
      line-height: 32px;
      background: #e9fbfb;
      text-align: center;
      border-right: 1px solid #000;
    }

    .disFlex {
      display: flex;
    }

    .alignCenter {
      align-items: center;
    }

    .top-border {
      border-top: 1px solid #000;
    }

    .colItem + .colItem {
      border-top: 1px solid #000;
    }

    .editType {
      display: flex;
      align-items: center;

      > div {
        width: 14.2857%;
        text-align: center;
      }

      .editTypeTitle {
        background: #e9fbfb;
      }

      > div + div {
        border-left: 1px solid #000;
      }
    }

    .cardItem {
      display: flex;
      align-items: center;
      line-height: 30px;

      .formTitle {
        flex-shrink: 0;
        width: 150px;
        height: 100%;
        line-height: 32px;
        background: #e9fbfb;
        text-align: center;
        border-right: 1px solid #000;
      }

      .formBigTitle {
        width: 150px;
        flex-shrink: 0;
        line-height: 73px;
        background: #e9fbfb;
        text-align: center;
        border-right: 1px solid #000;
      }
    }

    .cardItem + .cardItem {
      border-left: 1px solid #000;
    }
  }

  .prevention {
    .el-radio {
      --el-radio-input-border-radius: none;
    }

    // ::v-deep .el-radio__input.is-checked .el-radio__inner::after {
    //   content: '';
    //   width: 11px;
    //   height: 6px;
    //   border: 1px solid white;
    //   border-top: transparent;
    //   border-right: transparent;
    //   text-align: center;
    //   display: block;
    //   position: absolute;
    //   top: 2px;
    //   left: 0;
    //   vertical-align: middle;
    //   transform: rotate(-45deg);
    //   border-radius: 0;
    //   background: none;
    //   color: #a8abb2;
    //   // background-color:#a8abb2;
    // }

    .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    }
  }
</style>
